<template>



  <div class="content-box">
    <div class="box-search">
      <el-form :inline="true" :model="formData">

        <el-form-item label="企业名称：">
          <el-input v-model="formData.user" placeholder="请输入企业名称"></el-input>
        </el-form-item>
        <el-form-item label="职位类型：">
          <el-select v-model="formData.region" placeholder="请选择职位类型">
            <el-option label="1" value="shanghai"></el-option>
            <el-option label="2" value="beijing"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="城市：">
          <el-select v-model="formData.region1" placeholder="请选择城市">
            <el-option label="上海" value="shanghai"></el-option>
            <el-option label="北京" value="beijing"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item>
          <div style="display: flex;justify-content: flex-end;width: 300px;">
            <el-button class="search-button">查询</el-button>
          </div>

        </el-form-item>
      </el-form>
    </div>

    <div class="data-list">
      <div class="list-item" v-for="item in 4">
        <div class="item-pic">
          <img src="@/assets/image/gateway/jiuye/pic1.jpg" alt="" class="pic-img">
        </div>
        <div class="item-content">
          <div class="content-top">
            <div class="top-left">
              <div class="left-title">数据分析工程师</div>
              <div class="left-name">中国移动有限公司</div>
            </div>
            <div class="top-right">
              <span class="right-text">9千-1万</span>
              <el-button class="check-button"  @click="toChangeStatus">查看详情 <i class="el-icon-right"></i></el-button>
            </div>
          </div>
          <div class="content-bottom">
            <div>岗位详情：<br />
              1、要求：专业成绩良好，形象气质佳，综合素质高，具备较强的成就动机、沟通能力、抗压能力和资源协调能力，热爱销售工作，过往有学生干部经验者优先；<br />
              2、本科及以上学历，专业不限。</div>
          </div>
        </div>
      </div>


      <div class="list-pagination">
        <el-pagination background layout="prev, pager, next" :total="1000">
        </el-pagination>
      </div>
    </div>
  </div>


</template>

<script>
  export default {
    data() {
      return {
        formData: {

        }
      }
    },
    components: {

    },
    computed: {

    },
    methods: {
      toChangeStatus() {
        this.$emit('changeStatus')
      }
    }
  }
</script>

<style lang="scss" scoped>
  .content-box {
    width: 1200px;
    margin: 57px auto 0;
    font-weight: 400;
    font-size: 14px;
    color: #333333;
    padding-bottom: 40px;

    .box-search {
      .search-button {
        width: 124px;
        height: 36px;
        background: #FF8533;
        border-radius: 10px 10px 10px 10px;
        color: #FFFFFF;
      }
    }

    .data-list {

      .list-item {
        width: 100%;
        background: #FFFFFF;
        box-shadow: 0px 3px 7px 0px rgba(0, 0, 0, 0.06);
        border-radius: 20px 20px 20px 20px;
        border: 1px solid #DDDDDD;
        padding: 40px 26px;
        box-sizing: border-box;
        display: flex;
        margin-bottom: 30px;

        // &:last-child {
        //   margin-bottom: 0;
        // }

        .item-pic {
          width: 283px;
          height: 212px;
          border-radius: 20px;
          overflow: hidden;

          .pic-img {
            width: 283px;
            height: 212px;
          }
        }

        .item-content {
          flex: 1;
          margin-left: 43px;

          .content-top {
            display: flex;
            align-items: center;
            justify-content: space-between;
            padding-bottom: 20px;
            border-bottom: 2px solid #eeeeee;
            margin-bottom: 19px;

            .top-left {
              .left-title {
                font-weight: 400;
                font-size: 18px;
                color: #000000;
              }

              .left-name {
                font-weight: 400;
                font-size: 16px;
                color: #333333;
                margin-top: 18px;
              }
            }

            .top-right {
              display: flex;
              align-items: center;

              .right-text {
                font-weight: 400;
                font-size: 18px;
                color: #FF8533;
              }

              .check-button {
                margin-left: 20px;
                width: 124px;
                height: 36px;
                background: #1D60B9;
                border-radius: 10px 10px 10px 10px;
                color: #FFFFFF;
              }
            }
          }

          .content-bottom {
            font-weight: 400;
            font-size: 14px;
            color: #666363;
            line-height: 28px;
          }
        }
      }

      ::v-deep .list-pagination {
        display: flex;
        justify-content: center;

        .number {
          &.active {
            background: #1D60B9;
          }
        }
      }
    }
  }
</style>
